<!DOCTYPE html>
<script src="jquery.js"></script>
<script src="flexible.js"></script>

<style>
    *{
        margin:0px;
        padding:0px;
    }
    html,body{
        width:100%;
        height:100%;
    }
    .clearfix:after{
        clear:both;
        display:table;
        content:""
    }
    .fl{
        float:left;
    }
    .product{
        width:50%;
        padding:0.2rem;
        box-sizing: border-box;
    }
    .product img{
        width:100%;
        opacity:0.1;
        transition:all 1s;
    }

    #loading{
        box-shadow:3px 3px 3px 10px white;
        background:white;
        border-radius:5px;
        text-align:center;
        line-height:2rem;
    }
    #d1{
        position:fixed;
        z-index:9999;
        width:100%;
        height:100%;
        background:transparent;
        display:none;
        align-items: center;
        justify-content: center;
    }
    #productList{
        display: none;
    }
</style>

<div id="d1">
    <div id="loading"><img src="images/timg.gif" width="70%" /></div>
</div>



<div class="all">

    <div onclick="toTop()"
    style="position:fixed;right:0.3rem;bottom:4rem;background:white"
    >回到顶部</div>

    <div id="productList" class="clearfix">

    </div>
    <div id="loading2"
         style="text-align:center;height:1rem;display:none"
    ><img style="vertical-align: middle" src="images/timg.gif" height="90%" /> 正在加载 ...</div>
</div>

<script>
   var loadedImageCount = 0;
   var page = 0;
 //  var isDone = true;

   window.onload = function(){
     window.onscroll = function(){
         var st = document.body.scrollTop||document.documentElement.scrollTop; //0
         var ch = document.body.clientHeight||document.documentElement.clientHeight;//1136
         var sh = document.body.scrollHeight||document.documentElement.scrollHeight;

         var isDaoDi = st + ch == sh;
         if(isDaoDi&&!diXian){
             loadNextPageData();
         }
         loadRealImage();
     }
   };

   loadNextPageData();

   var timer;
   function toTop(){
      $("html,body").animate({ scrollTop: 0 }, 500);
//       var st = document.body.scrollTop||document.documentElement.scrollTop;
//       var speed = st/30;
//       console.log(speed);
//       timer = setInterval(function(){
//           if(st==0){
//               clearInterval(timer);
//           }
//
//           var currentTop = parseInt(st);
//           document.body.scrollTop = currentTop - speed;
//           document.documentElement.scrollTop = currentTop - speed;
//       },2);
   }

   function loadNextPageData(){
       // if(!isDone){
        //    return;
       // }
       page++;

       if(page>=2){
           loading2.style.display = "block";
       }
       //4996
      // var pageCount = (page-1)*44+4900;
       var pageCount = (page-1)*44;
     //  var pageCount = 4996;
       // 1 ==> 0
       // 2 ==> 44
       // 3 ==> 88
       // 4 ==>132
     // d1.style.display = "flex";


       //isDone = false;



       $.ajax(
           {
               url:"https://s.taobao.com/search?data-key=s" +
               "&data-value="+pageCount+"&ajax=true" +
               "&_ksTS=1530243656560_891" +
               "&q=%E7%94%B7%E9%9E%8B&refpid=" +
               "430267_1006&source=tbsy&" +
               "style=grid&tab=all&" +
               "pvid=b8318040521666151a70a5f3eebd88c3" +
               "&clk1=0bf0718470c87df17b328af7d5f0e69e" +
               "&spm=a21bo.2017.201856-sline." +
               "2.5af911d9RRzslq&bcoffset=0" +
               "&p4ppushleft=3%2C44",

               dataType:"jsonp",
               success:function(data){
                   loadData(data);
                   // console.log(data);
               }
           }
       );
   }
var diXian;

   function loadData(data){
       // productArr 是产品信息数组
       if(!data.mods.itemlist.data){
           if(!diXian) {
               diXian = document.createElement("div");
               diXian.innerHTML = "我是有底线的";
               diXian.style.textAlign = "center";
               diXian.style.padding = "0.5rem";
               document.body.appendChild(diXian);
               loading2.style.display = "none";
           }
           d1.style.display = "none";
           return;
       }

       var productArr = data.mods.itemlist.data.auctions;



       for(var i=0;i<productArr.length;i++){
           // p 就是某一个件商品
           var p = productArr[i];
           var productDiv = document.createElement("div");
           productDiv.className = "product fl";

           var image = document.createElement("img");
           //image.src = "http:" + p.pic_url+"_180x180.jpg_.webp";
          // image.src = "http:" + p.pic_url;
          image.setAttribute("real_image_src","http:" + p.pic_url+"_180x180.jpg");
           image.src = "images/dot.png";
           var titleDiv = document.createElement("div");
           titleDiv.innerHTML = p.title;
           var priceDiv = document.createElement("div");
           priceDiv.innerHTML = p.view_price;

           productDiv.appendChild(image);
           productDiv.appendChild(titleDiv);
           productDiv.appendChild(priceDiv);

           productList.appendChild(productDiv);
       }

     //  isDone = true;

       // productList.getElementsByTagName("img");
       // jquery 充分使用了css3 选择器来作为选择元素的方法
       // onclick = load();
       // onmouseover = mouseover();
       // onload = load();
       // 原生JS事件写法
//       d1.onclick = function(){
//
//       }
       // jQuery 事件写法
//       $("#d1").click(function(){
//
//       });

       // img 有一个事件名为onload ，意思是当图片加载完成后执行
       loadedImageCount = 0;



       $("#productList img").load(
           function(){
               loadedImageCount++;

              // console.log(loadedImageCount);
               if(productArr.length==loadedImageCount){
                   console.log("所有图片加载完毕！")
                   // 在1秒内让该元素淡入出现
                   $("#productList").fadeIn(400);
                   //加载真实图片
                   loadRealImage();
                   d1.style.display = "none";

               }
           }
       );

   }

   function loadRealImage(){
       var images = productList.getElementsByTagName("img");
       // 这三十六张图
       // 首先俺们要显示在可视区域的图片


       var st = document.body.scrollTop||document.documentElement.scrollTop; //0
       var ch = document.body.clientHeight||document.documentElement.clientHeight;//1136
       var sh = document.body.scrollHeight||document.documentElement.scrollHeight;

       // 某元素离顶部距离加上该元素的高度，如果这个结果小于 1136,
       // 该元素就完全在可视区域
       // pic 是一个普通图片元素

       for(var i=0;i<images.length;i++) {
           var picParent = images[i].parentNode;
           //eleheight 元素高度
           var eleheight = $(picParent).height();
           //eleOffsetTop 元素离顶部距离
           var eleOffsetTop = $(picParent).offset().top;

           if(eleheight+eleOffsetTop-st<ch){
               if(images[i].getAttribute("real_image_src")) {
                   images[i].src = images[i].getAttribute("real_image_src");
                   images[i].setAttribute("real_image_src", "");
                   images[i].style.opacity = 1;
               }

           }
       }
   }
</script>